<script setup>
import { reactive, watch } from "vue";
const user = reactive({
  name: "tom",
  info: {
    gender: "男",
    age: 18,
  },
});

// 4. 监听响应式对象数据的一个数据，复杂类型
// watch(()=>数据, 改变后回调函数, {deep: true})
// watch(user ,()=> {
//   console.log('数据变化了')
//    })
watch(() => user, () => {
  console.log('数据变化了')
},{deep:true,immediate:true})

// 2s改变数据
setTimeout(() => {
  user.info.age = 60;
}, 2000);
</script>

<template>
  <p>
    姓名：{{ user.name }} 性别：{{ user.info.gender }} 年龄：{{ user.info.age }}
  </p>
</template>